<template>
  <div class="order">
    <div class="order-menu">
      <div v-for="(item,index) in 4" :key="index" class="item" :class="{'active': itemIndex == index}" @click="itemIndex = index">
        <i class="el-icon-menu"></i>
        <p>全部订单</p>
      </div>
    </div>
    <div class="order-list">
      <table>
        <colgroup>
          <col width="20%">
          <col width="30%">
          <col width="15%">
          <col width="15%">
          <col width="20%">
        </colgroup>
        <thead>
          <tr>
            <th>商品</th>
            <th>商品参数</th>
            <th>价格</th>
            <th>发货状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in 5" :key="item">
            <td>
              <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/TB2bpqXarvpK1RjSZFqXXcXUVXa_!!3417956174-0-item_pic.jpg_160x160q90.jpg" alt="">
            </td>
            <td>
              <p>马丁靴女鞋秋季2019年新款秋鞋秋冬季加绒百搭英伦风秋款短靴冬鞋</p>
              <p>浙江温州至 喀什</p>
            </td>
            <td>￥168</td>
            <td style="color:#c0392b">已发货</td>
            <td>
              <button>退货</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'products',
  data () {
    return {
      itemIndex: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
.order
  .order-menu
    display flex
    border 1px solid #e74c3c
    width 600px
    border-radius 10px 10px 0 0
    overflow hidden
    border-bottom 0
    .item
      display flex
      width 150px
      height 80px
      text-align center
      align-items center
      justify-content center
      line-height 30px
      cursor pointer
      flex-direction column
    .active
      background #e74c3c
      width 200px
      transition .3s
  .order-list
    text-align center
    line-height 25px
    border 2px solid #e74c3c
    img
      width 100px
    button
      width 55px
      border-radius 5px
      height 30px
      background #e74c3c
      cursor pointer
</style>
